<template>
  <div class="cover">
    <div class="container">
      <!-- 1.0 商家名字 -->
      <h2 class="title">{{ seller.name }}</h2>
      <!-- 2.0 评星 -->
      <div class="star-wrapper">
        <star :score="seller.score" />
      </div>
      <!-- 3.0 优惠信息 -->
      <div class="cover-title">
        <div class="title-line"></div>
        <div class="title-text">优惠信息</div>
        <div class="title-line"></div>
      </div>

      <ul class="supports">
        <li :key="i" v-for="(support, i) in seller.supports" class="supports-items">
          <span class="supports-icon" :class="supportsClassMap[support.type]"></span>
          {{ support.description }}
        </li>
      </ul>

      <!-- 4.0 商家公告 -->
      <div class="cover-title">
        <div class="title-line"></div>
        <div class="title-text">商家公告</div>
        <div class="title-line"></div>
      </div>
      <div class="cover-bulletin">{{ seller.bulletin }}</div>
    </div>
    <!-- 5.0 关闭按钮-->
    <span class="icon-close" @click.stop="closeCover"></span>
  </div>
</template>

<script>
import star from "../star/star";
export default {
  name: "cover",
  props: ["show", "seller", "supportsClassMap"],
  methods: {
    closeCover() {
      // this.show = !this.show;
      // 子组件不能直接修改父组件传递过来的数据，只能由父组件自己修改
      this.$emit("closeCover");
    },
  },
  components: {
    star,
  },
};
</script>

<style lang="scss" scoped>
.cover {
  z-index: 666;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: eleblack(0.8);
  color: $e-white;
  // filter 只能模糊容器内部元素
  // backdrop-filter 让元素自身产生毛玻璃效果
  backdrop-filter: blur(2px); // 背景模糊度 - 火狐不支持

  .icon-close {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 32px;
    font-size: 32px;
    color: $e-white;
    opacity: 0.5;
  }
  .container {
    padding: 64px 36px;
    font-weight: 700;
    line-height: 16px;
    .title {
      text-align: center;
    }
    .star-wrapper {
      text-align: center;
      margin: 16px 0 28px 0;
    }
    .cover-title {
      display: flex;
      .title-line {
        flex: 1;
        height: 1px;
        width: 112px;
        transform: translateY(7px);
        background: rgba(255, 255, 255, 0.2);
      }
      .title-text {
        margin: 0 12px;
        font-size: $md-size;
        line-height: 14px;
      }
    }
    .supports {
      list-style: none;
      font-size: $sm-size;
      font-weight: 200;
      line-height: 12px;
      padding: 24px 12px 28px;
      overflow: hidden;
      .supports-items {
        height: 16px;
        margin-bottom: 12px;
        // 如果优惠信息的内容文本超出页面长度，
        // 则把超出部分隐藏
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .supports-items:last-child {
        margin-bottom: 0px;
      }
      .supports-icon {
        vertical-align: top;
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 6px;
        @include supports(1, 16px 16px);
      }
    }

    .cover-bulletin {
      padding: 24px 12px 0;
      font-weight: 200;
      line-height: 24px;
      font-size: $sm-size;
    }
  }
}
</style>
